<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>${product.productName} Instagram Analytics | GugeeData</title>
	<meta name="description" content="Let's check out ${product.productName} Instagram analytics report on GugueeData.">
	<meta name="keywords" content="${product.productName} Ins, Instagram Shop, e-commerce">
	<meta property="og:title" content="${product.productName} Instagram Analytics | GugeeData">
	<meta property="og:description" content="Let's check out ${product.productName} Instagram analytics report on GugueeData.">
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://www.gugeedata.com/instagram/product/${product.productId}">
	<meta property="og:image" content=" https://seo-imags.s3.us-east-2.amazonaws.com/Logo.png">
	<meta name="twitter:title" content="${product.productName} Instagram Analytics | GugeeDataa">
	<meta name="twitter:description" content="Let's check out ${product.productName} Instagram analytics report on GugueeData.">

	<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="/static/css/ins/common.css">
	<link rel="stylesheet" href="/static/css/ins/product-detail.css">
</head>
<body>
<#include "../../../header_new1.ftl">
<main>
	<section>
		<div class="container">
			<h1>Instagram Product Analytics</h1>
			<h2>Check out Instagram analytics report</h2>
		</div>
	</section>
	<section>
		<div class="container">
			<div class="product-info">
				<div class="product-top">
					<div class="product-img">
						<#if isMobile == false>
                            <#assign image = myController.getNoExpiredImage(product.image, 2, 1)>
						<#else>
                            <#assign image = myController.getNoExpiredImage(product.image, 2, 2)>
						</#if>
						<img src="${image}" alt="product img">
					</div>
					<div class="product-info-detail">
						<div class="product-info-left">
							<div class="title">
                                ${product.productName}
                                <#if product.overallCategoryName??>
									<span class="category">${product.overallCategoryName}</span>
                                </#if>
							</div>
							<div class="sub-title">
                                ${product.fullPrice}
                                <#if product.overallCategoryName??>
									<span class="category">${product.overallCategoryName}</span>
                                </#if>
							</div>
							<div class="sub-title-1">
								<a href="/instagram/influencer/${product.username}">
                                    <#assign picUrl=myController.getNoExpiredImage(product.picUrl, 0, 0)>
									<img src="${picUrl}" alt="business image">
								</a>
								<div class="label">${product.username}</div>
							</div>
						</div>
						<div class="product-info-right">
							<div class="product-action">
								<#if collectId??>
									<div class="gd-popover"<#if isMobile == false>content="Remove from Favorite"</#if> >
										<div class="icon-collect is-collect" data-id="${product.productId?c}" data-fid="${collectId?c}">
											<i class="iconfont iconquxiaoshoucang33"></i>
										</div>
									</div>
								<#else>
									<div class="gd-popover"<#if isMobile == false>content="Add to Favorite"</#if> >
										<div class="icon-collect" data-id="${product.productId?c}">
											<i class="iconfont iconshoucang"></i>
										</div>
									</div>
								</#if>
							</div>
						</div>
					</div>
					<div class="favorite-icon">

					</div>
				</div>
				<div class="product-bottom">
                    ${product.description}
				</div>
			</div>
		</div>
	</section>
	<section>
		<div class="container bg-gray">
			<div class="product-ana">
                <#if isUnlocked == false>
					<div class="demo-tip">
						<div class="title">
							Below is a sample report. This feature only available to ADVANCED version or higher. Please use credit to unlock the report or upgrade your membership.
						</div>
						<div class="action">
							<div class="gd-btn btn-default" onclick="demoCheckUnlock()">Unlock</div>
							<div class="gd-btn btn-info" onclick="toPricing()">Upgrade</div>
						</div>
					</div>
					<div class="demo-img">
						<img src="/static/img/ins/product-detail.png" alt="demo img">
						<img class="is-mobile" src="/static/img/ins/product-detail-mobile.png" srcset="/static/img/ins/product-detail-mobile@2x.png 2x" alt="demo img">
					</div>
                <#else>
					<div class="ana-info">
						<ul class="ana-tab">
							<li class="ana-tab-item" value="0">7 Days</li>
							<li class="ana-tab-item" value="1">15 Days</li>
							<li class="ana-tab-item is-active" value="2">30 Days</li>
						</ul>
						<div class="ana-wrap">
							<div class="ana-wrap-item">
								<div class="ana-title">Related Figures</div>
								<div class="ana-figure">
									<div class="figure-item">
										<div class="title" id="figureTitle1">
											<div class="gd-popover" content="The number of creator partners who have tagged the product in their posts during the selected period.">
												Influencer
												<i class="iconfont iconfaq"></i>
											</div>
										</div>
										<div class="sub-title">-</div>
									</div>
									<div class="figure-item">
										<div class="title">
											<div class="gd-popover" content="The number of ad posts that tagged the product during the selected period.">
												Post
												<i class="iconfont iconfaq"></i>
											</div>
										</div>
										<div class="sub-title">-</div>
									</div>
									<div class="figure-item">
										<div class="title">
											<div class="gd-popover" content="Total comments and likes of the product ad posts during the selected period.">
												Engagements
												<i class="iconfont iconfaq"></i>
											</div>
										</div>
										<div class="sub-title">-</div>
									</div>
									<div class="figure-item">
										<div class="title">
											<div class="gd-popover" content="Total views of the product video posts during the selected period.">
												Views
												<i class="iconfont iconfaq"></i>
											</div>
										</div>
										<div class="sub-title">-</div>
									</div>
								</div>
							</div>
							<div class="ana-wrap-item">
								<div class="ana-title">Recent Post Trends</div>
								<div class="ana-post-trend" id="postChart"></div>
							</div>
							<div class="ana-wrap-item">
								<div class="ana-title" id="partnerTitle">
									<div class="gd-popover" content="<dl class='modal-tip'>
										<dt>1. Post</dt>
										<dd>The number of media posts the ad partner tagged the product during the selected period.</dd>
										<dt>2. Engagements</dt>
										<dd>Total Comments and likes of the product posts during the selected period.</dd>
									</dl>">
										Influencer Partner
										<i class="iconfont iconfaq"></i>
									</div>
								</div>
								<div class="ana-partner">
									<div class="ana-partner-wrap" id="anaPartner"></div>
									<div class="ana-footer" onclick="getInfluencer()">
										View More
									</div>
								</div>
							</div>
							<div class="ana-wrap-item">
								<div class="ana-title">
									<div class="gd-popover" content="Engagements = Like + Review">
										Posts
										<i class="iconfont iconfaq"></i>
									</div>
									<div class="right">
										<div class="gd-select">
											<div class="gd-select-title">
												<div class="label">All</div>
												<i class="iconfont icondown1"></i>
											</div>
											<div class="gd-select-wrap">
												<ul>
													<li class="gd-option is-active">All</li>
													<li class="gd-option" value="1">Image</li>
													<li class="gd-option" value="2">Video</li>
													<li class="gd-option" value="4">Reels</li>
													<li class="gd-option" value="3">IGTV</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="ana-posts">
									<div class="ana-posts-wrap" id="anaPosts"></div>
									<div class="ana-footer">
										View More
									</div>
								</div>
							</div>
						</div>
					</div>
                </#if>
			</div>
		</div>
	</section>
</main>
<#include "../../../footer_new.ftl">
<script src="${request.contextPath}/static/js/nums.js" charset="utf-8"></script>
<script src="${request.contextPath}/static/js/dayjs.min.js"></script>
<script src="${request.contextPath}/static/js/time.js"></script>
<script src="${request.contextPath}/static/plugins/echarts.min.js"></script>
<script>
    let dayType = 2
    let influencerParams = {
        productId: ${product.productId?c},
        page: 1,
        pageSize: 8,
        dayType: 2
    }
	let postParams = {
        productId: ${product.productId?c},
		page: 1,
		pageSize: 8,
        mediaType: 0,
        dayType: 2
	}

    function toPricing() {
        if(!gugeeGobal.isLogin) {
            toLogin()
            return false
        }
        window.location.href = '/pricing'
    }
    function demoCheckUnlock() {
        let type = 1
        if(gugeeGobal.roleId < 2) {
            type = 2
        }
        checkUnlockPermission(2)
    }
    // type 1.用户角色验证 2.报告次数验证
    function checkUnlockPermission(type = 1) {
        if(!gugeeGobal.isLogin) {
            toLogin()
	        return false
        }

        showLoading()
	    const url = getEncodeUrl('/ins/product/report/unlock/checked', {
	        type: type
	    })
        _axios.get(url).then(res => {
            hideLoading()
            if (res.Code === 200) {
                if (res.Data) {
                    const perType = res.Data.type
	                switch (perType){
                        case 1:
                            showModal({
                                content: res.Msg,
	                            confirmBtnText: 'Upgrade',
                                confirmBtn: {
                                    event: toPricing
                                },
	                            cancelBtnText: 'Unlock',
	                            cancelBtn: {
                                    event: () => {
                                        closeModal()
                                        checkUnlockPermission(2)
                                    }
	                            }
                            })
                            break
		                case 2:
                            showModal({
                                content: res.Msg,
                                confirmBtn: {
                                    event: unlockReport
                                },
                            })
		                    break
		                case 3:
                            toPricing()
		                    break
		                default:
                            unlockReport()
	                }
                }
            } else {
                showToast(res.Msg)
            }
        })
        return true
    }
    function unlockReport() {
        showLoading()
        _axios.post('/ins/product/report/unlock', {
            productId: '${product.productId?c}'
        }).then(res => {
            if (res.Code === 200) {
                window.location.reload()
            }
            hideLoading()
            closeModal()
        })
    }
</script>
<script type="module">
    import { Select } from '/static/js/gd-ui/select/index.es.js'
	import { collectAction, openDetail } from "/static/js/common.js"

    <#if isUnlocked == true>
    initProductDetail()
    <#else>
    if(gugeeGobal.isLogin && gugeeGobal.roleId > 1) {
        checkUnlockPermission()
    }
    </#if>

    function initProductDetail() {
        initPostTrend()
        getInfluencer()
        getPost()

        initEvent()
    }
    function initEvent() {
        document.querySelector('.ana-posts .ana-footer').addEventListener('click', getPost)
    }
    function initPostTrend () {
        const anaFigure = document.querySelector('.ana-figure')
        const postChart = document.getElementById('postChart')

        anaFigure.showLoading()
        postChart.showLoading()
        _axios.get('/ins/product/trend/${product.productId?c}/' + dayType).then(res => {
            if(res.Code === 200) {
                const insProductStatistics = res.Data.insProductStatistics
                const figureData = document.querySelectorAll('.figure-item .sub-title')
                figureData[0].innerText = numFormat(+insProductStatistics.influencer)
                figureData[1].innerText = numFormat(+insProductStatistics.posts)
                figureData[2].innerText = numFormat(+insProductStatistics.engagements)
                figureData[3].innerText = +insProductStatistics.views?numFormat(+insProductStatistics.views): '-'

                const insProductTrends = res.Data.insProductTrends
                const chart = echarts.init(postChart)
                if(insProductTrends.length > 0) {
                    const option = {
                        color: ['#8267F1', '#1890FF'],
                        tooltip: {
                            trigger: 'axis',
                        },
                        grid: {
                            <#if isMobile == false>
                            left: 50,
                            right: 35,
                            top: 60,
                            bottom: 40,
                            <#else>
                            left: 35,
                            right: 20,
                            top: 30,
                            bottom: 30,
                            </#if>
                        },
                        legend: {
                            <#if isMobile == false>
                            right: 20,
                            top: 20,
                            <#else>
                            right: 16,
                            top: 6,
                            </#if>
                            data: ['Influencer', 'Post']
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                textStyle: {
                                    color: 'rgba(0,0,0,.45)'   //坐标轴字体颜色
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#EEE'
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#EEE' //刻度颜色
                                }
                            },
                            data: insProductTrends.map(item => item.takenDate)
                        },
                        yAxis: {
                            type: 'value',
                            splitLine:{
                                lineStyle:{
                                    color: '#EEE',
                                    type:'dashed' // 坐标轴虚线
                                },
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'rgba(0,0,0,.45)'   //坐标轴字体颜色
                                },
                                formatter: (val) => {
                                    return numFormat(+val)
                                }
                            }
                        },
                        series: [
                            {
                                name: 'Influencer',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                data: insProductTrends.map(item => item.influencer),
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(130, 103, 241, .1)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(130, 103, 241, 0)'
                                        }]),
                                    },
                                },
                            },
                            {
                                name: 'Post',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                data: insProductTrends.map(item => item.media)
                            }
                        ]
                    }
                    chart.setOption(option)
                } else {
                    chart.clear()
                    postChart.removeAttribute('_echarts_instance_')
                    postChart.removeAttribute('style')
                    showNoDataImg(postChart)
                }
            }
            anaFigure.hideLoading()
            postChart.hideLoading()
        })
    }
    function getInfluencer() {
        const url = getEncodeUrl('/ins/product/rel/blogger', influencerParams)
        const anaPartner = document.querySelector('.ana-partner')
        anaPartner.showLoading()
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const footer = anaPartner.querySelector('.ana-footer')
                if(res.Data.lastPage) {
                    footer.hide()
                } else {
                    footer.show()
                }

                const list = res.Data.list
                let strWrap = ''
                const anaPartnerWrap = document.getElementById('anaPartner')
                if(list && list.length > 0) {
                    list.forEach(item => {
                        strWrap += '<a href="/instagram/influencer/' + item.username + '" target="_blank">'
                        strWrap += '<div class="ana-partner-item">' +
                            '<div class="partner-info">' +
                            '<div class="avatar">' +
                            '<img class="img-avatar" src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.SMALL) + '" alt="partner image">'
                        if(item.isVerified) {
                            strWrap += '<img width="16" height="16" class="img-auth" src="/static/img/ins/Authentication.png" srcset="/static/img/ins/Authentication@2x.png 2x" alt="auth">'
                        }
                        strWrap += '</div>' +
                            '<div class="partner-detail">' +
                            '<div class="title">' +
                            '<div class="title_inner">' + item.username + '</div>'
                        if(item.categoryName) {
                            strWrap += '<div class="category">' + item.categoryName + '</div>'
                        } else if (item.overallCategoryName) {
							strWrap += '<div class="category">' + item.overallCategoryName + '</div>'
						}
                        strWrap += '</div>' +
                            '<div class="sub-title">Followers ' + numFormat(+item.followerCount) + '</div>'
                        if(item.categoryName) {
                            strWrap += '<div class="category">' + item.categoryName +'</div>'
                        } else {
                            strWrap += '<div class="category is-white">' + item.categoryName +'</div>'
                        }
                        strWrap += '</div>' +
                            '</div>' +
                            '<div class="partner-data">' +
                            '<div class="partner-data-item">' +
                            '<div class="label">Post</div>' +
                            '<div class="num">' + numFormat(+item.posts) + '</div>' +
                            '</div>' +
                            '<div class="partner-data-item">' +
                            '<div class="label">Engagements</div>' +
                            '<div class="num">' + numFormat(+item.engagements) + '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>'
                        strWrap += '</a>'
                    })
                    if(res.Data.firstPage) {
                        anaPartnerWrap.innerHTML = strWrap
                    } else {
                        anaPartnerWrap.innerHTML = anaPartnerWrap.innerHTML + strWrap
                    }
                }
                if(res.Data.totalPage === 0) {
                    showNoDataImg(anaPartnerWrap)
                }
                influencerParams.page++
            }
            anaPartner.hideLoading()
        })
    }
    function getPost() {
        const url = getEncodeUrl('/ins/product/rel/media', postParams)
        const anaPosts = document.querySelector('.ana-posts')
        anaPosts.showLoading()
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const footer = anaPosts.querySelector('.ana-footer')
                if(res.Data.lastPage) {
                    footer.hide()
                } else {
                    footer.show()
                }
                const list = res.Data.list
                const anaPostsWrap = document.getElementById('anaPosts')
                let strWrap = ''
                if(list && list.length > 0) {
                    list.forEach(item => {
                        strWrap += '<div class="ana-post-item" data-id="' + item.id + '" data-shortcode="' + item.shortcode + '">' +
                            '<div class="post-info">' +
                            '<div class="avatar">' +
                            '<img class="img-avatar" src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.SMALL) + '" alt="partner image">'
                        if(item.isVerified) {
                            strWrap += '<img width="16" height="16" class="img-auth" src="/static/img/ins/Authentication.png" srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="auth">'
                        }
                        strWrap += '</div>' +
                            '<div class="post-detail">' +
                            '<div class="title">' + item.username + '</div>' +
                            '<div class="sub-title">' + item.fullName + '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="post-avatar">' +
                            '<img src="' + getImage(item.displayUrl, IMAGE_TYPE.MEDIA, IMAGE_SIZE.MIDDLE) + '" alt="post image">'

                        switch (item.mediaType){
                            case 1:
                                strWrap += '<i class="iconfont iconMultiPhoto-16px"></i>'
                                break
                            case 2:
                                strWrap += '<i class="iconfont iconinsvideo-16px"></i>'
                                break
                            case 3:
                                strWrap += '<i class="iconfont iconigtv"></i>'
                                break
                            case 4:
                                strWrap += '<i class="iconfont iconinstagram-reels"></i>'
                                break
                        }

                        strWrap +='</div>' +
                            '<div class="post-er-info">' +
                            '<div class="label">Engagements</div>' +
                            '<div class="num">' + numFormat(+item.engagements) + '</div>' +
                            '</div>' +
                            '</div>'
                    })
                    if(res.Data.firstPage) {
                        anaPostsWrap.innerHTML = strWrap
                    } else {
                        anaPostsWrap.innerHTML = anaPostsWrap.innerHTML + strWrap
                    }
                    anaPostsWrap.querySelectorAll('.ana-post-item').forEach(item => {
                        const id = item.getAttribute('data-id'), shortcode = item.getAttribute('data-shortcode')
                        item.addEventListener('click', () => {
                            openDetail(id, shortcode)
                        })
                    })
                }
                if(res.Data.totalPage === 0) {
                    showNoDataImg(anaPostsWrap)
                }
                postParams.page++
            }
            anaPosts.hideLoading()
        })
    }

	initProductFavorite()
	function initProductFavorite(){
		const ele = document.querySelector('.product-action')
		ele.addEventListener('click', e => {
			const con = ele.querySelector('.icon-collect')
			const productFavorite = {
				element: con,
				url: '/ins/fa/product',
				collectKey: 'pid'
			}
			collectAction(productFavorite)
		})
	}

    document.querySelectorAll('.ana-tab .ana-tab-item').forEach(item => {
        item.addEventListener('click', e => {
			const ele = e.target
	        if(!ele.classList.contains('is-active')) {
	            ele.parentElement.querySelector('.is-active').classList.remove('is-active')
		        ele.classList.add('is-active')

                const value = ele.getAttribute('value')
		        dayType = influencerParams.dayType = postParams.dayType = +value
                influencerParams.page = 1
		        postParams.page = 1
		        initProductDetail()
	        }
        })
    })

    const select = new Select()
    select.setSelectedEvent(e => {
		const ele = e.target
	    const paramValue = ele.getAttribute('value')
        postParams.mediaType = paramValue || undefined
        postParams.page = 1
        getPost()
    })
    select.init()
</script>
</body>
</html>